.<template>
  <div>
    <div class="box">
      <crack></crack>
      <logo></logo>
      <logInput
        inputType="text"
        placeh="用户名/手机号码"
        official="输入有误"
        regExp="^.{3,10}$"
        @tellValue="cusername"
      ></logInput>
      <logInput
        inputType="text"
        placeh="昵称"
        official="输入有误"
        regExp="^.{3,10}$"
        @tellValue="cname"
      ></logInput>
      <logInput
        inputType="password"
        placeh="密码"
        official="输入有误"
        regExp="^.{6,8}$"
        @tellValue="cpassword"
      ></logInput>
      <logBtn btnName="注册" @tell="btnClick"></logBtn>
    </div>
    <p class="goLogin">
      <router-link to="/login">前往登录页</router-link>
    </p>
  </div>
</template>

<script>
import logo from "../components/logo";
import crack from "../components/crack";
import logInput from "../components/loginInput";
import logBtn from "../components/loginBtn";
// import { Toast } from 'vant';
export default {
  data() {
    return {
      username: "",
      name: "",
      password: ""
    };
  },
  methods: {
    //父子组件数据绑定
    cusername(value) {
      this.username = value;
    },
    cpassword(value) {
      this.password = value;
    },
    cname(value) {
      this.name = value;
    },
    btnClick() {
      const nickname = this.name;
      const username = this.username;
      const password = this.password;
      // console.log('注册',username,password);
      this.$axios({
        url: "/register",
        method: "post",
        data: {
          username,
          nickname,
          password
        }
      }).then(res => {
        const { statusCode, message } = res.data;

        //成功
        if (!statusCode) {
          this.$Toast.success(message);
          setTimeout(() => {
            this.$router.push({
              path: "/login"
            });
          }, 2000);
        }
        // console.log(res);
      });
    }
  },
  components: {
    logInput,
    logBtn,
    logo,
    crack
  },
  mounted() {
    localStorage.removeItem("token");
    localStorage.removeItem("user_id");
  }
};
</script>

<style lang="less" scoped >
.box {
  padding: 6.667vw;
}
.goLogin {
  text-align: center;
  color: green;
}
</style>